import React from "react";

import Sortable from 'sortablejs';
import styles from '../index.less'
import { Row,Col,Icon } from 'antd'

var sortable2

class FieldSetCenter extends React.Component{
  constructor(props){
    super(props);
    this.state = {

    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
    this.initSort()
  }

  initSort = () => {
    console.log('绘制=========');
    const that = this;
    const el = document.getElementById('itemsRight')
    sortable2 = new Sortable(el, {
      group: {
        name:"center",
        pull:false,
        put:true
      },
      animation: 150,
      fallbackOnBody:true,
      onChoose: function (evt) {
        // console.log('第一层的onChoose==',evt);
        if(evt.to.getAttribute("id") === 'itemsRight'){
          that.props.setCurrentField(evt)
        }
        
      },
      // 元素从一个列表拖拽到另一个列表
      onAdd: function (/**Event*/evt) {
        console.log('第一层onAdd==',evt);
        that.props.setFieldList(evt)
        // evt.item.remove()
      },
      // 拖拽元素改变位置的时候
      onChange: function(/**Event*/evt) {
        // console.log('第一层的onChange=====',evt);
      },
      // 结束拖拽
      onEnd: function (/**Event*/evt) {
        console.log('第一层的结束拖拽=====',evt);
        that.props.dragEvt(evt)
      },
    });
  }

  removeField = (id) => {
    this.props.removeFieldById(id)
  }

  renderField = (item,index) => {
    const { currentField } = this.props;
    switch(item.fieldType){
      case 'cols':
        return (
          <div className="hoverStyle" id={item.id} data-id={item.id} key={index} style={{position:"relative",padding:currentField && currentField.id == item.id ? '10px' : '0',border:currentField && currentField.id == item.id ? '1px dashed #3e5bff' : '0',}}>
            <Row className={styles.colsBox}>
              {
                item.colList.map((colItem,index) => {
                  return (
                    <Col span={colItem.span} key={colItem.key} id={colItem.id} style={{textAlign:colItem.textAlign}}>
                      {
                        colItem.fieldList.map((childItem,childIndex) => {
                          return this.renderField(childItem,childIndex)
                        })
                      }
                    </Col>
                  )
                })
              }
            </Row>
            <Icon onClick={(event) => this.removeField(currentField.id)} type="delete" color='red' className='removeIcon' style={{display:currentField && currentField.id == item.id ? 'block' : ''}} />

          </div>
        );
      case 'picture':
        return(
          <span className="hoverStyle" data-id={item.id} id={item.id} key={index} style={{position:"relative",display:"inline-block",padding:currentField && currentField.id == item.id ? '10px' : '0',border:currentField && currentField.id == item.id ? '1px dashed #3e5bff' : '0',}}>
            <img 
              key={index}
              src={item.src} 
              style={{
                ...item.styles,
                width:item.styles.width + 'px',
                height:item.styles.height + 'px',
                marginTop:item.styles.marginTop+'px',
                marginBottom:item.styles.marginBottom+'px',
                marginLeft:item.styles.marginLeft+'px',
                marginRight:item.styles.marginRight+'px',
                position:"relative"
              }} 
              id={item.id}
              data-id={item.id}
            />
            <Icon onClick={(event) => this.removeField(currentField.id)} type="delete" color='red' className='removeIcon' style={{display:currentField && currentField.id == item.id ? 'block' : ''}} />
          </span>
        )
      case 'tag':
        return(
          <span className="hoverStyle" data-id={item.id} id={item.id} key={index} style={{position:"relative",display:"inline-block",padding:currentField && currentField.id == item.id ? '10px' : '0',border:currentField && currentField.id == item.id ? '1px dashed #3e5bff' : '0',}}>
            <span
              style={{
                ...item.styles,
                width:item.styles.width + 'px',
                height:item.styles.height + 'px',
                marginTop:item.styles.marginTop+'px',
                marginBottom:item.styles.marginBottom+'px',
                marginLeft:item.styles.marginLeft+'px',
                marginRight:item.styles.marginRight+'px',
                borderRadius:item.styles.borderRadius+'px',
                fontSize:item.styles.fontSize+'px',
                lineHeight:item.styles.lineHeight + 'px',
              }}
            >
              {item.text}
            </span>
            <Icon onClick={(event) => this.removeField(currentField.id)} type="delete" color='red' className='removeIcon' style={{display:currentField && currentField.id == item.id ? 'block' : ''}} />
          </span>
          
        )
      case 'text':
      case 'api':
      case 'form':
        return(
          <span className="hoverStyle" data-id={item.id} id={item.id} key={index} style={{position:"relative",display:"inline-block",padding:currentField && currentField.id == item.id ? '10px' : '0',border:currentField && currentField.id == item.id ? '1px dashed #3e5bff' : '0',}}>
            <span
              className={styles.formBox} 
              style={{
                ...item.styles,
                fontSize:item.styles.fontSize+'px',
                marginTop:item.styles.marginTop+'px',
                marginBottom:item.styles.marginBottom+'px',
                marginLeft:item.styles.marginLeft+'px',
                marginRight:item.styles.marginRight+'px',
              }}
            >
              {item.text}
            </span>
            <Icon onClick={(event) => this.removeField(currentField.id)} type="delete" color='red' className='removeIcon' style={{display:currentField && currentField.id == item.id ? 'block' : ''}} />
          </span>
        )
    }    
  }

  createSortBox = (id) => {
    const that = this;
    try{
      const el = document.getElementById(id)
      console.log('创建了栅格拖拽容器',el);
      new Sortable(el, {
        group: {
          name:"sharedChild",
          pull:false,
          put:true
        },
        animation: 150,
        fallbackOnBody:true,
        onChoose: function (evt) {
          console.log('内层的onChoose==',evt);

          that.props.setCurrentField(evt)
        },
        // 元素从一个列表拖拽到另一个列表
        onAdd: function (/**Event*/evt) {
          console.log('内层的onAdd==',evt);
          that.props.setFieldList(evt)
          // evt.item.remove()
        },
        // 结束拖拽
        onEnd: function (/**Event*/evt) {
          console.log('内层的结束拖拽=====',evt);
          that.props.dragEvt(evt)
        },
      });
    }catch(e){
      console.log('创建元素拖拽容器报错====');
    }
    
  }

  render(){
    const { fieldList,domKey } = this.props
    console.log(fieldList);
    return(
      <div className={styles.cardCenter}>
        <div id="itemsRight" className={styles.itemsRight} key={domKey}>
          {
            fieldList.map((item,index) => {
              return this.renderField(item,index)
            })
          }
        </div>
      </div>
    )
  }
}



export default FieldSetCenter;
